<template>
    <div class="leetcode-home">
        <NavigationBar></NavigationBar>
        <div class="main-content">
            <!-- 左侧文章列表 -->
            <div class="left-section">
                <el-tabs type="card" v-model="activeName" class="custom-tabs" @tab-click="handleClick">
                    <el-tab-pane label="哈基米" name="latest">
                        <div class="tag-container">
                            <el-tag class="tag" v-for="tag in tagList" :key="tag.name" type="warning" size="small">
                                {{ tag.name }}
                            </el-tag>
                        </div>
                        <ArticleList :articles="articles"></ArticleList>
                    </el-tab-pane>
                    <el-tab-pane v-for="tab in tabCategories" :key="tab.id" :label="tab.discussTopicName"
                        :name="String(tab.id)">
                        <div class="tag-container">
                            <el-tag class="tag" v-for="tag in tagList" :key="tag.name" type="warning" size="small">
                                {{ tag.name }}
                            </el-tag>
                        </div>
                        <ArticleList :articles="articles"></ArticleList>
                    </el-tab-pane>
                </el-tabs>

                <!-- 分页 -->
                <div class="pagination-container">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage" :page-sizes="[5, 10, 20, 30, 40, 50]" :page-size="pageSize"
                    layout="sizes, prev, pager, next" :total="total">
                </el-pagination>
                </div>
            </div>

            <!-- 右侧必读榜单 -->
            <div class="right-section">
                <div class="personal-menu">
                    <el-button type="primary" icon="el-icon-edit" size="small" @click="goToEdit()">
                        写讨论
                    </el-button>
                    <el-button type="primary" icon="el-icon-star-off" size="small">
                        看收藏
                    </el-button>
                    <el-button type="primary" icon="el-icon-reading" size="small">
                        看文章
                    </el-button>
                </div>
                <div class="must-read-card">
                    <div class="card-header">
                        <span>热门讨论</span>
                        <div class="date-select">
                            <el-button type="text">日</el-button>
                            <el-button type="text">周</el-button>
                            <el-button type="text">月</el-button>
                        </div>
                    </div>
                    <div class="must-read-list">
                        <div v-for="(article, index) in topArticles" :key="article.id" class="must-read-item"
                            @click="goToArticle(article.id)">
                            <div class="rank-number" :class="{ 'top-three': index < 3 }">
                                {{ index + 1 }}
                            </div>
                            <div class="article-info">
                                <div class="article-title">{{ article.title }}</div>
                                <div class="article-tags">
                                    <el-tag v-for="tag in tags" :key="tag" size="mini" type="info" class="tag-item">
                                        {{ tag }}
                                    </el-tag>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ArticleList from '@/components/ArticleList.vue'
import NavigationBar from '@/components/NavigationBar.vue'
import articleListApi from '@/api/articleList'

export default {
    components: {
        ArticleList,
        NavigationBar,
    },
    data() {
        return {
            myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef'],
            activeName: 'latest',
            tags: ["TypeScript", "Vue3", "工程化"],
            tabCategories: [],
            DiscussTopic: {},
            DiscussInfoDTO: {},
            DiscussLabelDTO: {},
            DiscussInfoData: {},
            tabId: null,
            tagList: [],
            currentPage: 1,
            pageSize: 5,
            total: null,
            articles: [],
            topArticles: [
                {
                    id: 1,
                    title: '2024年前端开发路线图',
                    views: '12.5k',
                    likes: 2341
                },
                {
                    id: 2,
                    title: 'Vue3 + TypeScript最佳实践',
                    views: '10.2k',
                    likes: 1890
                },
                {
                    id: 3,
                    title: '微服务架构设计指南',
                    views: '9.8k',
                    likes: 1654
                },
                {
                    id: 4,
                    title: 'Docker容器化部署实战',
                    views: '8.7k',
                    likes: 1432
                },
                {
                    id: 5,
                    title: '算法与数据结构精讲',
                    views: '7.9k',
                    likes: 1298
                },
                {
                    id: 6,
                    title: '前端性能优化指南',
                    views: '7.5k',
                    likes: 1234
                },
                {
                    id: 7,
                    title: '前端工程师必备技能',
                    views: '6.8k',
                    likes: 1123
                },
                {
                    id: 8,
                    title: '前端面试秘籍',
                    views: '6.5k',
                    likes: 1056
                },
                {
                    id: 9,
                    title: '前端开发者必备书单',
                    views: '6.2k',
                    likes: 987
                },
                {
                    id: 10,
                    title: '前端开发者必备工具集',
                    views: '5.9k',
                    likes: 923
                }
            ],
        }
    },
    //组件创建完成后执行
    created() {
        this.queryByTopic({});
        this.DiscussLabelDTO.discussTopicId = 0;
        this.getLabelInfo(this.DiscussLabelDTO);
        this.DiscussInfoDTO = { "pageNo": this.currentPage, "pageSize": this.pageSize, "discussTopicId": 0 };
        this.getDiscussInfo(this.DiscussInfoDTO);
    },
    methods: {
        //点击话题标签
        handleClick(tab, event) {
            if (tab.name === 'latest') {
                this.tabId = 0;
                this.DiscussLabelDTO.discussTopicId = this.tabId;
                this.DiscussInfoDTO = { pageNo: this.currentPage, pageSize: this.pageSize, discussTopicId: this.tabId };
            } else {
                this.tabId = tab.name;
                this.DiscussLabelDTO.discussTopicId = this.tabId;
                this.DiscussInfoDTO = { pageNo: this.currentPage, pageSize: this.pageSize, discussTopicId: this.tabId };
            }
            this.getLabelInfo(this.DiscussLabelDTO);
            this.getDiscussInfo(this.DiscussInfoDTO);
        },
        //获取讨论信息
        async getDiscussInfo(DiscussInfoDTO) {
            try {
                // 1. 发送请求并等待
                const res = await articleListApi.getDiscussInfo(DiscussInfoDTO);

                // 2. 更新组件数据（Vue 会自动触发视图更新）
                this.DiscussInfoData = res;
                this.articles = this.DiscussInfoData.result;
                this.total = res.total;
                // console.log('DiscussInfoData:', this.DiscussInfoData);
                // 3. 可选：处理后端分页逻辑
                if (this.articles.length === 0) {
                    this.$message.warning('没有更多数据！');
                }
            } catch (error) {
                console.error('请求失败:', error);
                this.$message.error('加载数据失败，请重试！');
            }
        },
        //获取话题
        async queryByTopic(DiscussTopic) {
            try {
                // 1. 发送请求并等待
                const res = await articleListApi.queryByTopic(DiscussTopic);

                // 2. 更新组件数据（Vue 会自动触发视图更新）
                this.tabCategories = res;
                // console.log('tabCategories:', this.tabCategories);
                // 3. 可选：处理后端分页逻辑
                if (this.tabCategories.length === 0) {
                    this.$message.warning('没有更多数据！');
                }
            } catch (error) {
                console.error('请求失败:', error);
                this.$message.error('加载数据失败，请重试！');
            }
        },
        //获取话题标签
        async getLabelInfo(DiscussLabelDTO) {
            try {
                // 1. 发送请求并等待
                const res = await articleListApi.getLabelInfo(DiscussLabelDTO);

                // 2. 更新组件数据（Vue 会自动触发视图更新）
                this.tagList = res;
                // console.log('tabCategories:', this.tabCategories);
                // 3. 可选：处理后端分页逻辑
                if (this.tagList.length === 0) {
                    this.$message.warning('没有更多数据！');
                }
            } catch (error) {
                console.error('请求失败:', error);
                this.$message.error('加载数据失败，请重试！');
            }
        },
        //分页数据
        handleSizeChange(val) {
            this.pageSize = val;
            this.DiscussInfoDTO = {pageNo: this.currentPage, pageSize: val, discussTopicId: this.tabId };
            console.log(`每页 ${val} 条`);
            this.getDiscussInfo(this.DiscussInfoDTO);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.DiscussInfoDTO = {pageNo: val, pageSize: this.pageSize, discussTopicId: this.tabId };
            console.log(`当前页: ${val}`);
            this.getDiscussInfo(this.DiscussInfoDTO);
        },
        fetchArticles() {
            // 获取文章列表
            console.log('Fetching articles...')
        },
        goToArticle(id) {
            this.$router.push(`/article/${id}`)
        },
        goToEdit() {
            this.$router.push('/edit')
        }
    }
}
</script>

<style scoped>
.leetcode-home {
    max-width: 100%;
    /* margin: 0 auto; */
}

.main-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    margin-top: 20px;
    margin-left: 100px;
    margin-right: 100px;
}

/* 左侧区域样式 */
.left-section {
    background: #fff;
    border-radius: 8px;
    /* padding: 10px; */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.custom-tabs {
    margin-bottom: 1%;

    /* background: #6e33b6; */
}

.pagination-container {
    margin-top: 20px;
    text-align: center;
}

/* 右侧必读榜单样式 */
.must-read-card {
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    /* padding-bottom: 12px; */
    border-bottom: 1px solid #f0f0f0;
    /* background: blue; */
}

.card-header span {
    font-size: 16px;
    font-weight: 500;
    color: #262626;
    margin: 0;
}

.date-select {
    display: flex;
    gap: 12px;
}

.must-read-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    cursor: pointer;
    transition: all 0.3s;
}

.must-read-item:hover {
    background: #f5f5f5;
}

.rank-number {
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 4px;
    /* margin-top: 10px; */
    margin-right: 12px;
    font-size: 14px;
    background: #f5f5f5;
    flex-shrink: 0;
}

.rank-number.top-three {
    background: #ffd700;
    color: #fff;
}

.article-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}


.article-title {
    font-size: 14px;
    color: #262626;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* background: blue; */
}

.article-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #8c8c8c;
}

.article-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tag-container {
    margin-bottom: 10px;
    margin-left: 20px;
}

.tag {
    margin-right: 10px;
    margin-bottom: 10px;
}

.tag-item {
    margin-right: 10px;
}

.article-tags {
    /* background: blue; */
    gap: 10px;
}

.personal-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}



/* 响应式布局 */
@media (max-width: 768px) {
    .main-content {
        grid-template-columns: 1fr;
    }

    .right-section {
        order: -1;
    }
}
</style>